import React, { Component } from 'react'
import { Layout, Menu, Dropdown, Avatar  } from 'antd';
import { withRouter } from 'react-router';
import {connect} from 'react-redux';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined
} from '@ant-design/icons';

const { Header } = Layout;
class TopHeader extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    }, ()=>{      
      this.props.actionCreator(this.state.collapsed)   
    });
  };
  userHandle = (obj) =>{    
    localStorage.setItem("isLogin",false)
    this.props.history.push(obj.key);
  }
  render() {    
    let  menus = (
      <Menu onClick={ this.userHandle }>
        <Menu.Item key = "/login">
          退出
        </Menu.Item>
      </Menu>
    );
    return (
    <Header className="site-layout-background" style={{ padding: 0 }}>
      {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: 'trigger',
        onClick: this.toggle,
      })}
      <div style={{float:"right",margin:'0 15px 0 0'}}>
        欢迎kangqiang回来
        <Dropdown overlay={menus} >
            <Avatar size={30} icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
    )
  }
}
const mapStateToProps = () => {  
  return {
  }
}
const mapDispathToProps = {
  actionCreator : (isCollapsed)=>{
    return {
      type:'mySidemenuCollapsed',
      payload:isCollapsed
    }
  }
}
export default withRouter(connect(mapStateToProps, mapDispathToProps)(TopHeader))